<template>
  <div>
    <div class="bigDiv">
      <div style="margin-bottom: 0.2rem;">
        <p style="text-align: center;font-weight: 500;line-height: 1rem; font-size: 0.5rem;">用户登录</p>
      </div>
      <div class="content">
        <div style="border-bottom: solid 1px #f5f5f5">
          <p class="cont-wen">账号</p>
          <input class="w-input" v-model="loginForm.username" type="text" placeholder="请输入您的账号">
        </div>
        <div style="border-bottom: solid 1px #f5f5f5;margin-bottom: 0.4rem;">
          <p class="cont-wen">密码</p>
          <input class="w-input" type="password" v-model="loginForm.password" placeholder="请输入您的密码">
        </div>
      </div>
      <div id="footer" @click="login">
        <p id="footer_p1">
					<span id="footer_span1">
						登录
					</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import {login} from "@/api/index"

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      }
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    login() {
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$toast("账号或密码不能为空");
        return;
      }
      login(this.loginForm).then((res) => {
        console.log(res)
        if (res.code == 200) {
          localStorage.setItem("userInfo", JSON.stringify(res.data))
          this.$toast("登陆成功");
          setTimeout(() => {
            this.$router.push("/index")
          }, 1500);
        } else {
          this.$toast(res.msg);
        }

      })
    },
  }
};
</script>
<style scoped lang='scss'>
@import './index.scss';
</style>